<script setup lang="ts">
import type { CardDateB } from "./scripts/card";
import { onMounted, toRaw } from "vue";
import Copy from "@/components/copy/index.vue";
import Operate from "./operate.vue";
const props = defineProps({
    cardData: Object
});
const item: CardDateB = toRaw(props.cardData) as any;
onMounted(() => {
    // console.log('yzt', item);
});
</script>
<template>
    <VCard class="card d-flex flex-column">
        <div class="row_1 d-flex justify-space-between">
            <div class="d-flex">
                <VIcon>mdi mdi-swap-horizontal</VIcon>&nbsp;&nbsp;
                <!-- <span>0x24af…de3w</span> -->
                <Copy :text="item.origin.transactionHash" :num="3"></Copy>
            </div>
            <span>{{ item.time }}</span>
        </div>
        <div class="row_21 mt-3 d-flex">
            <!-- <img src="" alt=""> -->
            <VIcon>mdi mdi-swap-horizontal</VIcon>&nbsp;&nbsp;
            <div class="d-flex" style="width: 100%">
                <span style="color: var(--win)">{{ item.inAmount }}</span
                >&nbsp;&nbsp;
                <span>#{{ item?.inSymbol }}</span>
            </div>
        </div>
        <div class="row_22 mb-3 mt-1 d-flex">
            <!-- <img src="" alt=""> -->
            <VIcon>mdi mdi-arrow-up-circle-outline</VIcon>&nbsp;&nbsp;
            <div class="d-flex justify-space-between" style="width: 100%">
                <div class="d-flex">
                    <span style="color: var(--lose)">{{ item.outAmount }}</span
                    >&nbsp;&nbsp;
                    <span>#{{ item.outSymbol }}</span>
                </div>
                <span style="color: white; font-weight: bold">${{ item.inusdt }}</span>
            </div>
        </div>
        <Operate class="row_3"></Operate>
    </VCard>
</template>

<style scoped lang="less">
.card {
    padding: 10px;
    font-size: 11px;
    color: #b1b6c6;
    background-color: #202329;
}
.row_22 {
    opacity: 1;
}
.row_3 {
    .ico-num {
        display: flex;
        align-items: center;
        font-size: 12px;
        // background-color: blue;
    }
}
:deep(.copy-txt) {
    color: #fff !important;
}
</style>
